import React, {Component} from 'react';
import { inject, observer } from 'mobx-react';
import { Flex, TabBar } from 'antd-mobile';
import { Link } from 'react-router';
import Ajax from '../lib/Ajax';

@inject('appStore', 'languageStore')
@observer
export default class ModuleName extends Component{
	constructor(props) {
	  super(props);
	  this.state = {
    }
	}

	componentDidMount(){

  }

	render(){
		const languageData = this.props.languageStore.getPageData('bar');
		const menus = this.props.appStore.isTeacher? languageData.menus2:languageData.menus;
		// am-tab-bar-tab-active
		return (
			<div className="am-tab-bar-bar" tabIndex="0">
				{
					menus.map((item, index) => {
						return <div className="am-tab-bar-tab" key={index}>
							<Link to={item.link}>
						    <div data-seed="logId">
						      <div className="am-tab-bar-tab-icon">
						        <span className="am-tab-bar-tab-badge tab-badge am-badge"><i className={`iconfont icon-${item.icon}`}></i></span>
						      </div>
						      <p className="am-tab-bar-tab-title">{item.title}</p>
						    </div>
							</Link>
					  </div>
					})
				}
			</div>
		)
	}
}
